<template>
	<view class="content">

		<view class="top-box">
			<view class="top-box-l">
				<uv-input placeholderClass="placeholderClass" v-model="iptValue" placeholder="怪物便利店系列"
					prefixIcon="search" suffixIcon="scan" suffixIconStyle="color: #000;fontSize:40rpx;" shape="circle"
					clearable @clear="clearValue">

				</uv-input>
			</view>
			<view class="top-box-r">
				<image src="/static/images/shequqiandao.png" mode="widthFix"></image>签到
			</view>
		</view>

		<view class="content-box1" :style="tabCurrent == 1 || tabCurrent == 3 ? 'margin-bottom:20rpx;' : ''">
			<view :class="['content-box1-item',tabCurrent == item.id ? 'activeTab' : '']"
				v-for="(item,index) in tabList" :key="index" @click="clickTab(item.id)">
				{{item.name}}
				<view class="active-line" v-if="tabCurrent == item.id"></view>
			</view>
		</view>

		<block v-if="tabCurrent == 1 || tabCurrent == 3">
			<view class="shop-box">
				<Waterfall :list="goodsList" :columnCount="2" :gap="10">
					<template #default="{ item }">
						<view class="shop-box-item">
							<view class="img">
								<image :src="item.image" mode="widthFix"></image>
							</view>
			
							<view class="text1">
								泡泡玛特 X 壹橙视觉 labubu和周边泡泡玛特 X 壹橙视觉 labubu和周边
							</view>
			
							<view class="text2">
								<view class="text2-l">
									<view class="avatar">
										<image src="/static/images/quequanquanbu.png" mode="widthFix"></image>
									</view>
			
									<view class="nickname">
										布果chacoco布果chacoco
									</view>
			
								</view>
								<view class="text2-r">
									<!-- <uv-icon name="heart" color="#828999" size="24"></uv-icon> -->
									<!-- 点击收藏 -->
									<uv-icon name="heart-fill" color="#fa2800" size="18"></uv-icon>
									12
								</view>
							</view>
						</view>
					</template>
				</Waterfall>
			</view>
		</block>

		<block v-if="tabCurrent == 2">
			<view class="tip-box">
				<view class="tip-title">
					热度榜<image src="/static/images/shequtop.png" mode="widthFix"></image>
				</view>
				<view class="tip-box-item" v-for="(item,index) in 5">
					<view class="tip-box-item-l">
						<span v-if="index == 0">{{index + 1}}</span>
						<span
							style="background: linear-gradient(0deg, #FFA852 0%, #FF4102 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;"
							v-if="index == 1">{{index + 1}}</span>
						<span
							style="background: linear-gradient(90deg, #FDC429 0%, #FF9022 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;"
							v-if="index == 2">{{index + 1}}</span>
						<span
							style="background: linear-gradient(90deg, #FDC429 0%, #FF9022 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;"
							v-if="index == 3">{{index + 1}}</span>
						<span
							style="background: linear-gradient(90deg, #C2C7D3 0%, #A3A5A9 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;"
							v-if="index == 4">{{index + 1}}</span>

						因为GPT-5，这群人决定在Reddit
					</view>
					<!-- <view class="tip-box-item-r">
					荐
				</view> -->
					<!-- <view class="tip-box-item-r" style="background: linear-gradient( 180deg, #FFA44F 0%, #FF4203 100%);">
					热
				</view> -->
					<view class="tip-box-item-r" style="background: #FA455F;">
						新
					</view>
				</view>
			</view>

			<view class="gomorebox">
				<view class="gomorebox-l">
					热聊话题
				</view>
				<view class="gomorebox-r">
					前往更多 <uv-icon name='arrow-right' size='12' color='#9095A8'></uv-icon>
				</view>
			</view>

			<view class="swiper-box">
				<view class="swiper-box-con">
					<view class="swiper-box-con-item" v-for="(item,index) in 10" :key="index">
						<view class="swiper-box-con-item-l">
							<image src="/static/images/quequanquanbu.png" mode="widthFix"></image>
						</view>
						<view class="swiper-box-con-item-r">
							珍爱生命远离设计珍爱生命，远离设计珍爱生命，远离设计
						</view>
					</view>
				</view>
			</view>

			<view class="comment-box" v-for="(item,index) in 10" :key="index">
				<view class="comment-box-con" hover-class="activeM" @click="goDetail(item)">
					<view class="comment-box-con-t">
						<view class="avatar">
							<image src="/static/images/quequanquanbu.png" mode="widthFix"></image>
						</view>
						<view class="nickname">
							<view class="nickname-t">
								牛奶面包麻薯牛奶面包麻薯牛奶面包麻薯牛奶面包麻薯牛奶面包麻薯
							</view>
							<view class="nickname-b">
								刚刚发布
							</view>
						</view>
						<view class="guanzhu">
							关注
						</view>

						<!-- <view class="guanzhu" style="background-color: #f2f3f7;color:#50535C;">
							已关注
						</view> -->
					</view>

					<view class="comment-box-con-m">
						<span>#我们的字体现在问题很大吗？#</span> 打工牛马罢了，哪有权力定义审美，老板觉得问题大就大，觉得问题不大就不大
					</view>

					<!-- 一张 -->
					<!-- <view class="comment-box-con-img1">
					<image src="/static/images/ceshitupian.png" mode="widthFix" @click="priewImage(index,imageList)"></image>
				</view> -->
					<!-- 两张 -->
					<!-- <view class="comment-box-con-img2">
					<image v-for="(item,index) in 2" src="/static/images/ceshitupian.png" mode="widthFix" @click="priewImage(index,imageList)"></image>
				</view> -->
					<!-- 三张 -->
					<!-- <view class="comment-box-con-img3">
					<image v-for="(item,index) in 3" src="/static/images/ceshitupian.png" mode="widthFix" @click="priewImage(index,imageList)"></image>
				</view> -->
					<!-- 九张 -->
					<view class="comment-box-con-img9">
						<image v-for="(item,index) in 9" src="/static/images/ceshitupian.png" mode="widthFix"
							@click="priewImage(index,imageList)"></image>
					</view>

					<view class="huati">
						<view class="huati-item" v-for="(item,index) in 3">
							<view class="huati-item-l">
								#
							</view>
							<view class="huati-item-r">
								每日打卡
							</view>
						</view>
					</view>

					<view class="shoucang">
						<view class="shoucang-l">
							<view class="shoucang-l-item">
								<uv-icon name="chat" color="#50535C" size="24"></uv-icon> 12
							</view>
							<view class="shoucang-l-item">
								<!-- <uv-icon name="star" color="#50535C" size="24"></uv-icon> -->
								<!-- 点击收藏 -->
								<uv-icon name="star-fill" color="#ffdd60" size="24"></uv-icon>
								12
							</view>
						</view>
						<view class="shoucang-l">
							<view class="shoucang-l-item" style="justify-content: flex-end;">
								<!-- <uv-icon name="heart" color="#50535C" size="24"></uv-icon> -->
								<!-- 点击收藏 -->
								<uv-icon name="heart-fill" color="#fa2800" size="24"></uv-icon>
								12
							</view>
						</view>
					</view>

					<view class="comment-detail">
						<view class="comment-detail-l">
							<image src="/static/images/quequanquanbu.png" mode="widthFix"></image>
						</view>
						<view class="comment-detail-m">
							<view class="comment-detail-m-text1">
								欣想事成xx欣想事成xx欣想事成xx
							</view>
							<view class="comment-detail-m-text2">
								UP能看一下私信吗，想学习学习想学习学习想学习学习想学习学习想学习学习
							</view>
							<view class="comment-detail-m-text3">
								58分钟前 辽宁 回复
							</view>
						</view>
						<view class="comment-detail-r">
							<!-- <uv-icon name="heart" color="#828999" size="24"></uv-icon> -->
							<!-- 点击收藏 -->
							<uv-icon name="heart-fill" color="#fa2800" size="24"></uv-icon>
							12
						</view>
					</view>

					<view class="more-box">
						共661条评论 <uv-icon name='arrow-right' size='12' color='#9095A8'></uv-icon>
					</view>
				</view>
			</view>
		</block>

		<block v-if="tabCurrent == 4">
			<view class="commun-box">
				<view class="commun-box-con">
					<view class="box-l">
						<image src="/static/images/quequanquanbu.png" mode="widthFix"></image>
					</view>

					<view class="box-m">
						<view class="text1">
							牛奶面包麻薯牛奶面包麻薯牛奶面包麻薯
						</view>

						<view class="text2">
							回复了你的评论 昨天07:35
						</view>
						<!-- <view class="text2">
							回复了你的帖子 昨天07:35
						</view> -->

						<view class="text3">
							审美很在线，下次可以找你合作审美很在线，下次可以找你合作审美很在线，下次可以找你合作
						</view>

						<view class="text4">
							哇感谢，会继续加油提升哇感谢，会继续加油提升哇感谢，会继续加油提升哇感谢，会继续加油提升
						</view>

						<view class="text5">
							<view class="text5-l" hover-class="activeM">
								<!-- <uv-icon name="heart" color="#50535C" size="18"></uv-icon> -->
								<uv-icon name="heart-fill" color="#fa2800" size="18"></uv-icon>赞
							</view>
							<view class="text5-l" hover-class="activeM" @click="show = true">
								<uv-icon name="chat" color="#50535C" size="18"></uv-icon>回复
							</view>
						</view>
					</view>

					<view class="box-r">
						<image src="/static/images/ceshitupian.png" mode="widthFix"></image>
					</view>
				</view>
			</view>

			<uv-popup ref="popup" @close="close" closeOnClickOverlay>
				<view class="textarea-box">
					<uv-textarea focus border="bottom" height="100" v-model="textAreaValue"
						placeholder="请输入..."></uv-textarea>
				</view>
			</uv-popup>
		</block>

		<view style="width: 100%;height: 80rpx;"></view>

		<view class="xinjian" hover-class="activeM" @click="createQq">
			<uv-icon name="plus" size="18" color="#fff"></uv-icon>发布内容
		</view>
	</view>
</template>

<script setup>
	import Waterfall from '@/components/Waterfall.vue'
	import {
		ref,
		reactive
	} from 'vue'
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import {
		baseUrl,
		http
	} from '@/utils/request'
	import emitter from '@/utils/emitter.js'
	import {
		showMsg
	} from '@/utils/showMsg'
	const goodsList = ref([{
			image: 'https://picsum.photos/id/1011/200/300',
		},
		{
			image: 'https://picsum.photos/id/1012/200/400',
		},
		{
			image: 'https://picsum.photos/id/1013/200/500',
		},
		{
			image: 'https://picsum.photos/id/1014/200/350',
		},
		{
			image: 'https://picsum.photos/id/1015/200/450',
		},
		{
			image: 'https://picsum.photos/id/1016/200/600',
		}, {
			image: 'https://picsum.photos/id/1017/200/600',
		}, {
			image: 'https://picsum.photos/id/1018/200/600',
		}, {
			image: 'https://picsum.photos/id/1019/200/600',
		}, {
			image: 'https://picsum.photos/id/1020/200/600',
		}, {
			image: 'https://picsum.photos/id/1021/200/600',
		}
	])
	const tabList = ref([{
		id: 1,
		name: '关注'
	}, {
		id: 2,
		name: '推荐'
	}, {
		id: 3,
		name: '最新'
	}, {
		id: 4,
		name: '消息'
	}])
	const tabCurrent = ref(1)
	const show = ref(false)
	const textAreaValue = ref('')
	const popup = ref()
	
	const clickTab = (id) => {
		tabCurrent.value = id
	}
	
	const priewImage = (currentIndex, imageList) => {
		const urls = imageList.map(item => item)
		uni.previewImage({
			current: urls[currentIndex],
			urls: urls
		})
	}
	
	const createQq = () => {
		uni.navigateTo({
			url: '/subpackages/shequ/addcommunt'
		})
	}
	
	const close = () => {
		popup.value.close()
	}
	
	const goDetail = () => {
		uni.navigateTo({
			url: '/subpackages/shequ/communityDetail'
		})
	}
</script>

<style>
	page {
		background-color: #f2f3f7;
	}
</style>
<style lang="scss" scoped>
	.top-box {
		width: 100%;
		padding: 0rpx 30rpx;
		display: flex;
		align-items: center;
		gap: 20rpx;
		background-color: #fff;

		.top-box-l {
			width: calc(100% - 120rpx);
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			:deep(.u-input--circle.data-v-651602aa) {
				background-color: #f2f3f7;
				border: none;
			}

			::v-deep .placeholderClass {
				color: #828999 !important;
			}

			::v-deep .u-input--radius.data-v-fdbb9fe6,
			.u-input--square.data-v-fdbb9fe6 {
				background-color: #f5f6fa !important;
				border: none !important;
			}
		}

		.top-box-r {
			width: 120rpx;
			height: 60rpx;
			background: #E90D00;
			border-radius: 30rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 10rpx;
			font-size: 28rpx;
			color: #FFFFFF;

			image {
				width: 26rpx !important;
				height: 28rpx !important;
			}
		}
	}

	.content-box1 {
		width: 100%;
		height: 96rpx;
		background: #FFFFFF;
		display: flex;
		border-bottom: 2rpx solid #eee;

		.content-box1-item {
			position: relative;
			width: 25%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: 400;
			font-size: 30rpx;
			color: #9095A8;
		}

		.activeTab {
			font-weight: 600;
			color: #333;
		}

		.active-line {
			position: absolute;
			bottom: 10rpx;
			left: 50%;
			transform: translateX(-50%);
			width: 70rpx;
			height: 8rpx;
			background-color: #e90d00;
			border-radius: 4rpx;
		}
	}

	.shop-box {
		width: 100%;
		margin-top: 30rpx;
		padding: 0rpx 30rpx;
	
		.shop-box-item {
			box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
			padding-bottom: 10rpx;
			border-radius: 0rpx 0rpx 8rpx 8rpx;
	
			.img {
				position: relative;
				width: 100%;
	
				image {
					width: 100% !important;
					// height: 400rpx !important;
					border-radius: 8rpx 8rpx 8rpx 8rpx !important;
				}
			}
	
	
			.text1 {
				width: 100%;
				margin: 20rpx 0rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				font-weight: 600;
				font-size: 30rpx;
				color: #000000;
				padding: 0rpx 10rpx;
			}
	
			.text2 {
				width: 100%;
				display: flex;
				padding: 0rpx 10rpx;
	
				.text2-l {
					width: 60%;
					display: flex;
					align-items: center;
					gap: 10rpx;
	
					.avatar {
						width: 36rpx;
						height: 36rpx;
	
						image {
							width: 36rpx !important;
							height: 36rpx !important;
							border-radius: 50% !important;
						}
					}
	
					.nickname {
						width: calc(100% - 36rpx);
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						font-weight: 400;
						font-size: 24rpx;
						color: #9095A8;
					}
				}
	
				.text2-r {
					width: 40%;
					display: flex;
					align-items: center;
					justify-content: flex-end;
					gap: 10rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #9095A8;
				}
			}
		}
	}

	.tip-box {
		width: 100%;
		padding: 30rpx 30rpx 50rpx 30rpx;
		background-color: #fff;

		.tip-title {
			width: 100%;
			display: flex;
			align-items: center;
			gap: 10rpx;
			font-weight: 600;
			font-size: 30rpx;
			color: #000000;

			image {
				width: 60rpx !important;
				height: 20rpx !important;
			}
		}

		.tip-box-item {
			width: 100%;
			margin-top: 30rpx;
			display: flex;
			align-items: center;
			gap: 10rpx;

			.tip-box-item-l {
				max-width: calc(100% - 40rpx);
				font-weight: 400;
				font-size: 28rpx;
				color: #182033;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;


				span {
					margin-right: 10rpx;
					font-weight: 600;
					background: linear-gradient(0deg, #E90D00 0%, #FF6B62 100%);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
				}
			}

			.tip-box-item-r {
				width: 40rpx;
				height: 40rpx;
				background: linear-gradient(180deg, #FFBF67 0%, #FF622F 100%);
				border-radius: 4rpx 4rpx 4rpx 4rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-weight: 500;
				font-size: 24rpx;
				color: #FFFFFF;
			}
		}
	}

	.gomorebox {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0rpx 30rpx;
		margin-top: 40rpx;

		.gomorebox-l {
			font-weight: 600;
			font-size: 30rpx;
			color: #000000;
		}

		.gomorebox-r {
			display: flex;
			align-items: center;
			font-weight: 400;
			font-size: 26rpx;
			color: #9095A8;
			gap: 10rpx;
		}
	}

	.swiper-box {
		width: 100%;
		padding: 0rpx 30rpx;
		overflow: hidden;
		white-space: nowrap;
		margin: 30rpx 0rpx;

		.swiper-box-con {
			display: inline-flex;
			animation: scroll 20s linear infinite;

			.swiper-box-con-item {
				max-width: 372rpx;
				height: 60rpx;
				background: #FFFFFF;
				border-radius: 30rpx;
				display: flex;
				align-items: center;
				gap: 10rpx;
				padding: 0rpx 20rpx;
				margin-right: 20rpx;

				.swiper-box-con-item-l {
					width: 36rpx;
					height: 36rpx;
					border-radius: 18rpx;

					image {
						width: 36rpx !important;
						height: 36rpx !important;
						border-radius: 18rpx !important;
					}
				}

				.swiper-box-con-item-r {
					width: calc(100% - 36rpx);
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					font-weight: 400;
					font-size: 26rpx;
					color: #182033;
				}
			}
		}

		@keyframes scroll {
			0% {
				transform: translateX(0);
			}

			100% {
				transform: translateX(-50%);
			}
		}
	}

	.comment-box {
		width: 100%;
		margin-top: 20rpx;
		padding: 0rpx 30rpx;

		.comment-box-con {
			width: 100%;
			padding: 30rpx;
			background-color: #fff;
			border-radius: 24rpx;

			.comment-box-con-t {
				width: 100%;
				display: flex;
				align-items: center;
				gap: 20rpx;

				.avatar {
					width: 80rpx;
					height: 80rpx;

					image {
						width: 80rpx !important;
						height: 80rpx !important;
						border-radius: 40rpx !important;
					}
				}

				.nickname {
					width: calc(100% - 240rpx);

					.nickname-t {
						width: 100%;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						font-weight: 600;
						font-size: 28rpx;
						color: #000000;
					}

					.nickname-b {
						width: 100%;
						font-weight: 400;
						font-size: 24rpx;
						color: #9095A8;
						margin-top: 10rpx;
					}
				}

				.guanzhu {
					width: 160rpx;
					height: 52rpx;
					background: #E90D00;
					border-radius: 26rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-weight: 400;
					font-size: 24rpx;
					color: #FFFFFF;
				}
			}

			.comment-box-con-m {
				width: 100%;
				font-weight: 400;
				font-size: 28rpx;
				margin: 20rpx 0rpx;
				color: #000;

				span {
					color: #546796;
				}
			}

			.comment-box-con-img1 {
				width: 100%;

				image {
					width: 100% !important;
					height: 360rpx !important;
					border-radius: 8rpx 8rpx 8rpx 8rpx !important;
				}
			}

			.comment-box-con-img2 {
				width: 100%;
				display: flex;
				gap: 10rpx;

				image {
					width: 50% !important;
					height: 240rpx !important;
					border-radius: 8rpx 8rpx 8rpx 8rpx !important;
				}
			}

			.comment-box-con-img3 {
				width: 100%;
				display: flex;
				gap: 10rpx;

				image {
					width: 202rpx !important;
					height: 202rpx !important;
					border-radius: 8rpx 8rpx 8rpx 8rpx !important;
				}
			}

			.comment-box-con-img9 {
				width: 100%;
				display: flex;
				flex-wrap: wrap;
				gap: 10rpx;

				image {
					width: 202rpx !important;
					height: 202rpx !important;
					border-radius: 8rpx 8rpx 8rpx 8rpx !important;
				}
			}

			.huati {
				width: 100%;
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				gap: 10rpx;
				margin-top: 20rpx;

				.huati-item {
					display: flex;
					align-items: center;
					gap: 10rpx;
					height: 36rpx;
					padding: 0rpx 10rpx;
					background: #FFF4F3;
					border-radius: 4rpx 4rpx 4rpx 4rpx;

					.huati-item-l {
						width: 28rpx;
						height: 28rpx;
						background: #FF6860;
						border-radius: 14rpx 14rpx 0rpx 14rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 24rpx;
						color: #fff;
					}

					.huati-item-r {
						font-weight: 400;
						font-size: 24rpx;
						color: #182033;
					}
				}
			}

			.shoucang {
				width: 100%;
				margin-top: 20rpx;
				display: flex;

				.shoucang-l {
					width: 50%;
					display: flex;

					.shoucang-l-item {
						width: 100%;
						display: flex;
						align-items: center;
						gap: 10rpx;
						font-weight: 400;
						font-size: 24rpx;
						color: #50535C;
					}
				}
			}

			.comment-detail {
				width: 100%;
				margin-top: 30rpx;
				display: flex;
				gap: 20rpx;

				.comment-detail-l {
					width: 80rpx;
					height: 80rpx;

					image {
						width: 80rpx !important;
						height: 80rpx !important;
						border-radius: 40rpx !important;
					}
				}

				.comment-detail-m {
					width: calc(100% - 180rpx);

					.comment-detail-m-text1 {
						width: 100%;
						font-weight: 400;
						font-size: 28rpx;
						color: #50535C;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.comment-detail-m-text2 {
						width: 100%;
						font-size: 28rpx;
						color: #000;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						margin-top: 10rpx;
					}

					.comment-detail-m-text3 {
						width: 100%;
						margin-top: 10rpx;
						color: #9095A8;
						font-size: 24rpx;
					}
				}

				.comment-detail-r {
					width: 60rpx;
					display: flex;
					flex-direction: column;
					justify-content: flex-start;
					align-items: center;
					gap: 10rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #828999;
				}
			}

			.more-box {
				display: flex;
				align-items: center;
				width: 100%;
				margin-top: 20rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #9095A8;
			}
		}
	}

	.commun-box {
		width: 100%;
		padding: 0rpx 30rpx;
		margin: 20rpx 0rpx;

		.commun-box-con {
			width: 100%;
			border-radius: 24rpx;
			background-color: #fff;
			padding: 30rpx;
			display: flex;

			.box-l {
				width: 80rpx;
				height: 80rpx;

				image {
					width: 80rpx !important;
					height: 80rpx !important;
					border-radius: 40rpx !important;
				}
			}

			.box-m {
				width: calc(100% - 240rpx);
				padding: 0rpx 20rpx;

				.text1 {
					width: 100%;
					font-weight: 600;
					font-size: 28rpx;
					color: #182033;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.text2 {
					width: 100%;
					font-weight: 400;
					font-size: 24rpx;
					color: #9095A8;
					margin-top: 10rpx;
				}

				.text3 {
					width: 100%;
					font-weight: 400;
					font-size: 28rpx;
					color: #182033;
					margin-top: 10rpx;
				}

				.text4 {
					width: 100%;
					font-weight: 400;
					font-size: 24rpx;
					color: #9095A8;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					margin-top: 28rpx;
				}

				.text5 {
					width: 100%;
					margin-top: 28rpx;
					display: flex;
					align-items: center;
					gap: 30rpx;

					.text5-l {
						width: 120rpx;
						height: 60rpx;
						background: #F2F3F7;
						border-radius: 30rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						gap: 8rpx;
						font-weight: 400;
						font-size: 24rpx;
						color: #182033;
					}
				}
			}

			.box-r {
				width: 160rpx;
				height: 160rpx;

				image {
					width: 160rpx !important;
					height: 160rpx !important;
					border-radius: 8rpx 8rpx 8rpx 8rpx !important;
				}
			}
		}
	}

	.xinjian {
		position: fixed;
		bottom: 30rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 225rpx;
		height: 76rpx;
		background: #E90D00;
		box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(233, 13, 0, 0.5);
		border-radius: 38rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10rpx;
		font-weight: 400;
		font-size: 30rpx;
		color: #FFFFFF;
	}

	.textarea-box {
		width: 100%;
		height: 300rpx;
		padding: 30rpx;
	}
</style>